<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul,li{ margin: 0; padding:0; list-style: none;}
        ul{ width:360px;}
        ul li{
            width:60px;
            height:70px;
            float:left;
            background: url('./img/aNavBg.png');
            transition: .5s;
        }

        ul li:nth-child(1){ background-position: 0 -70px;}
        ul li:nth-child(2){ background-position: -60px -70px;}
        ul li:nth-child(3){ background-position: -120px -70px;}
        ul li:nth-child(4){ background-position: -180px -70px;}
        ul li:nth-child(5){ background-position: -240px -70px;}
        ul li:nth-child(6){ background-position: -300px -70px;}

        ul li:hover:nth-child(1){ background-position: 0 0;}
        ul li:hover:nth-child(2){ background-position: -60px 0;}
        ul li:hover:nth-child(3){ background-position: -120px 0;}
        ul li:hover:nth-child(4){ background-position: -180px 0;}
        ul li:hover:nth-child(5){ background-position: -240px 0;}
        ul li:hover:nth-child(6){ background-position: -300px 0;}
    </style>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>




</body>
</html>